<template>
    <div>
        <div id="market-app" class="page-container">
            <div class="page-content">
                <div class="page-view">
                    <div class="deposit-details">
                        <div class="content" id="products">
                            <div class="top_header">
                                <img src="/static//app//images/arrow_left.png" @click="back_to(CoinDetail.coin_type)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px" alt="">
                                <h4 style="text-align: center">充值
                                    <span @click="to_history(CoinDetail.coin_type)" style="float: right; margin-right: 0.5rem; color: #828a98; font-size: 18px; font-weight: normal">历史记录</span>
                                </h4>
                            </div>
                            <div class="chooseSymbol" style="margin-top: 0.5rem" @click="openview()">
                                <img class="symbol-pic" :src="CoinDetail.img" />
                                <p class="symbol-asset">
                                    {{CoinDetail.name_upper}}
                                    <img class="rowright" src="/static/app/images/rowright.png"></p>
                            </div>
                            <div class="deposit-address">
                                <div class="b-address">
                                    <p class="label-address">BNB 充值地址</p>
                                    <p class="asset-address" id="address">{{depositAddress}}</p>
                                </div>
                                <ul class="b-address-option">
                                    <li class="copybtn" @click="copy()">
                                        <i class="font font-copy"></i>
                                        <p>复制地址</p>
                                    </li>
                                    <li class="QRcodebtn" @click="openQRcode()">
                                        <i class="font font-ewm"></i>
                                        <p>显示二维码</p>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div id="testbox" type="text/html" style="display: none">
            <div id="dataList">
                <div class="search">
                    <img src="/static/app/images/bigmirror.png" />
                    <input placeholder="搜索" style="caret-color: #F0B90B;" />
                    <span onclick="layer.closeAll();">取消</span>
                </div>
                <ul class="allsymbols">
                    <li v-for="(item, index) in actData" :key="index" :id="item.coin_type">
                        <p>
                            <img :src="item.img" /> {{item.name_upper}}
                            <span>({{item.full_name}})</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <script id="QRcode" type="text/html">
            <div class="QRcode">
                <i class="font font-close close-popup" onclick="layer.closeAll();"></i>
                <p class="QRcodeadd">BNB 充值地址</p>
                <div class="QRcode-content">
                    <div class="QRcode-img">
                        <!-- <canvas id="cvs" width="200" height="200"></canvas> -->
                        <img id="depositImg" width="200" height="200" src="" />
                    </div>
                    <p id="a1" class="address2">0x0ff2f3e2290d3a0149d5f4fffabc4d93e14458e9</p>

                    <div class="row">
                        <div class="col-100" style="margin-top: 0.5rem; background: #dcab37">
                            <span style="color: #fff !important" class="button button-fill button-big copy-btn2 r-copy" onclick="copy2()">复制地址</span>
                        </div>
                        <!-- <div class="col-100" style="margin-top: 0.5rem">
					<a class="button button-fill button-big" id="Download" onclick="downQRcode()">保存二维码</a>
				</div> -->
                    </div>
                </div>
            </div>
        </script>
    </div>

</template>


<script>
import ClipboardJS from "clipboard";
// 保存文件函数
var saveFile = function(data, filename) {
  var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
  save_link.href = data;
  save_link.download = filename;

  var event = document.createEvent("MouseEvents");
  event.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  save_link.dispatchEvent(event);
};

export default {
  data() {
    return {
      assets: 1000, //资产
      assetsTyple: "BNB", //资产类型
      CoinDetail: {},
      coin_type: "",
      depositAddress: "",
      img_url: "",
      actData: []
    };
  },

  methods: {
    openview: function() {
      var content = $("#testbox").html();
      layer.open({
        className: "depositlist",
        type: 1,
        content: $("#testbox").html(),
        anim: "up",
        style:
          "background: #12161C;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;"
      });
      $(".allsymbols li").bind("click", function() {
        //   console.log(this.id);
        router.push({ path: "/deposit/" + this.id });
        window.location.reload();
      });
    },
    to_test: function() {
      alert("888");
    },
    copy: function() {
      var clipboard = new ClipboardJS(".copybtn", {
        target: function(trigger) {
          //return trigger.nextElementSibling;
          return document.querySelector(".asset-address");
        }
      });
      //console.log(clipboard);
      clipboard.on("success", function(e) {
        e.clearSelection();
        layer.open({
          type: 0,
          content: "成功",
          className: "cgong",
          skin: "msg",
          style:
            "border:none; background-color:#fff; color:#333;width:115px;border-radius:0px",
          time: 2 //2秒后自动关闭
        });
      });
    },
    openQRcode: function() {
      layer.open({
        className: "QRcodeBox",
        type: 1,
        content: $("#QRcode").html(),
        anim: "up",
        style:
          "background:none;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;"
      });
      this.drawQRcode();
      $("#depositImg").attr("src", "data:image/gif;base64," + this.img_url);
      $("#a1").html(this.depositAddress);
    },
    drawQRcode: function() {
      var canvas = document.getElementById("cvs");
      var image = new Image();
      image.src = "http://www.nbapp.cn:8080/images/BNB_address.png";
      image.onload = function() {
        canvas.getContext("2d").drawImage(this, 0, 0, 200, 200);
      };
    },
    /* 根据类型获取图标和名称 */
    get_coin_type: function(coin_type) {
      /* 发送请求 */
      $.get(
        "/m/api/get_balance",
        {
          coin_type: coin_type
        },
        data => {
          this.CoinDetail = data;
          /* 图标类型 */
          var coin_info = get_coin_info(data.coin_type);
          /* 图标样式 */
          this.CoinDetail.img = get_coin_icon_url(data.coin_type);
          this.CoinDetail.name_upper = coin_info.name_upper;
        }
      );
    },

    /* 根据类型获取充值地址 */
    get_deposit_address: function(coin_type) {
      /* 发送请求 */
      $.post(
        "/btc/deposit",
        {
          coin_type: coin_type
        },
        data => {
          // console.log(data);
          this.depositAddress = data.address || "暂无地址";
          this.img_url = data.base64_img;
        }
      );
    },
    /* 跳转到历史记录页面 */
    to_history: function(coin_type) {
      this.$router.push({ path: "/history/" + coin_type });
    },
    /* 返回按钮 */
    back_to: function(coin_type) {
      this.$router.push({ path: "/balances_detail/" + coin_type });
    },
    copy2: function() {
      var clipboard2 = new ClipboardJS(".copy-btn2", {
        target: function(trigger) {
          //return trigger.nextElementSibling;
          return document.querySelector(".address2");
        }
      });
      //console.log(clipboard);
      clipboard2.on("success", function(e) {
        e.clearSelection();
        layer.open({
          type: 0,
          content: "成功",
          className: "cgong",
          skin: "msg",
          style:
            "border:none; background-color:#fff; color:#333;width:115px;border-radius:0px",
          time: 2 //2秒后自动关闭
        });
      });
    },
    downQRcode: function() {
      var oCanvas = document.getElementById("cvs");
      /*自动保存为png*/
      // 获取图片资源
      var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute("src");
      saveFile(img_data1, "qrcode.png");
    },
    /* 根据类型获取图标和名称 */
    get_all_coin: function() {
      /* 发送请求，获取所有数据 */
      $.post("/btc/get_balances", {}, data => {
        //   console.log(data);
        var show_data = [];
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          //   console.log(item)
          var info = {};
          /* 图标类型 */
          var coin_info = get_coin_info(item.coin_type);
          //   console.log(coin_info)
          /* 图标样式 */
          info.img = get_coin_icon_url(item.coin_type);
          // console.log("["+info.img+"]")
          info.coin_type = item.coin_type;
          info.amount = item.amount;
          info.name_upper = coin_info.name_upper;
          info.full_name = coin_info.cname;
          info.is_hidden = false;
          show_data.push(info);
        }
        this.actData = show_data;
        // console.log(this.actData);
      });
    },
    click_list: function() {
      $("li").on("click", () => {
        console.log(123123);
      });
    }
  },
  created() {
    /* 根据URL地址获取参数 */
    this.coin_type = this.$route.params.coin_type;
    this.get_coin_type(this.coin_type);
    this.get_deposit_address(this.coin_type);
    this.get_all_coin();
  },
  mounted() {},
  components: {}
};
</script>

<style>

</style>
